<template>
  <div class="layout-menu">
    <el-menu :default-active="global.menu.default_active" :collapse="global.menu.collapse" class="layout-menu-tree">
      <el-menu-item v-for="menu in global.menu.list" :key="menu.code" :index="menu.code" @click="openTabForMenu(menu)">
        <el-icon><SvgIcon :name="menu.icon"></SvgIcon></el-icon>
        <template #title>{{ menu.title }}</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import SvgIcon from '@/renderer/components/icon/index.vue';
import { useRouter } from 'vue-router';
import { GlobalState } from '@/renderer/global';
import { MenuItemState } from '@/renderer/global/menu';

const router = useRouter();
const global: GlobalState = inject('global') as GlobalState;

const openTabForMenu = (menu: MenuItemState) => {
  global.openTabForMenu(menu, router);
};
</script>
